
<template>
  <div>
    <div class="topic">
      <div>
        <Checkbox
          v-if="showBox"
          v-model="checkAll"
          @on-change="handleAll"
          style="margin-right: 20px"
          >全选</Checkbox
        >
        <Button v-if="showBox" type="error" ghost size="small" @click="delData"
          >删除
          <span v-if="delLength">({{ delLength }})</span>
        </Button>
      </div>
      <Button
        type="error"
        :ghost="showBox ? true : false"
        @click="batchManage"
        >{{ showBox ? "取消管理" : "批量管理" }}</Button
      >
    </div>
    <div class="card" v-if="topicList.length">
      <div v-for="(item, index) in topicList" :key="index" class="card-item">
        <Checkbox
          class="checkbox"
          v-model="item.checked"
          v-if="showBox"
          @on-change="handleItem"
        />
        <div class="topic-item">
          <div class="topic-imgs">
            <img class="topic-imgs-item" :src="item.img" alt="" />
          </div>
          <div class="info">
            <div class="title" @click="handleDetail(item)">
              {{ item.title }}
            </div>
            <div class="bottom">
              <div class="bottom-left"  @click="gotoMypage(item)">
                <Avatar
                  class="face"
                  @on-error="
                    (val) =>
                      (val.target.src = require('@/assets/communityimg/avatar.png'))
                  "
                  icon="ios-person"
                  :src="item.face"
                />
                <!-- <img class="face" :src="item.face" alt="" /> -->
                <div>{{ item.nick_name }}</div>
              </div>
              <div class="container-but">
                <div class="ribbon" @click="collect(item.id, 2)">
                  <Icon type="ios-star-outline" color="#FDCD10" />
                  <span>{{ item.is_sc }}</span>
                </div>
                <div class="ribbon">
                  <Icon
                    type="ios-share-outline"
                    @click="collect(item.id, 3)"
                  /><span>{{ item.is_zf }}</span>
                </div>
                <div class="ribbon" @click="handleDetail(item)">
                  <Icon type="ios-text-outline" />
                  <span>{{ item.is_comits }}</span>
                </div>
                <div class="ribbon npk" @click="collect(item.id, 1)">
                  <Icon type="ios-thumbs-up-outline" />
                  <span>{{ item.is_like }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <empty v-else />

    <div class="page" v-if="topicList.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="pagesize"
        show-total
      />
    </div>
  </div>
</template>

<script>
import { getTopTopicList, delTopicList, setdlc } from "@/api/community";
export default {
  data() {
    return {
      showBox: false, //是否展示多选框
      checkAll: false, //全选
      delLength: 0, //删除数据得个数
      topicList: [],
      pagesize: 8,
      page: 1,
      total: 0,
    };
  },
  created() {
    this.getTopic();
  },
  methods: {
    getTopic() {
      let data = {
        mid: JSON.parse(localStorage.userInfo).id,
        page: this.page,
        pagesize: this.pagesize,
      };
      getTopTopicList(data).then((res) => {
        if (res.code == 1) {
          this.topicList = res.data;
          this.total = res.total;
          this.topicList.forEach((v) => {
            if (v.thumbs) {
              v.img = v.thumbs.split(",")[0];
            }
          });
        }
      });
    },
    //列表单个勾选
    handleItem() {
      this.delLength = this.topicList.filter((item) => item.checked).length;
    },
    //批量管理
    batchManage() {
      this.showBox = !this.showBox;
      this.topicList.forEach((item) => {
        item.checked = false;
      });
      this.delLength = 0;
      this.checkAll = false;
    },
    //切换分页
    currentHandle(current) {
      this.page = current;
      this.getTopic();
    },
    //全选
    handleAll() {
      if (this.checkAll) {
        this.topicList.forEach((item) => {
          item.checked = true;
        });

        this.delLength = this.topicList.length;
      } else {
        this.topicList.forEach((item) => {
          item.checked = false;
        });
        this.delLength = 0;
      }
    },
    // 跳转详情
    handleDetail(item) {
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
          foucsid: item.aouthid,
          // type: item.type,
        },
      });
    },
    // 跳转到主页
    gotoMypage(item) {
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      this.$router.push(
        {
          path: "/personalpage",
          query: {
            aouthid: item.aouthid,
          },
        }
        // console.log()
      );
    },
    // 一键三连
    collect(id, type) {
      let data = {
        topicid: id,
        type: type,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: JSON.parse(localStorage.userInfo).id,
      };
      setdlc(data).then((res) => {
        if (res.code == 1) {
          this.getTopic();
        }
      });
    },
    //删除数据
    delData() {
      const selList = this.topicList.filter((item) => item.checked);
      if (!selList.length) {
        return this.$Message.error("请勾选需要删除的数据");
      }
      this.$Modal.confirm({
        title: "提示",
        content: "是否确认删除所勾选数据？",
        onOk: () => {
          let data = {
            mid: JSON.parse(localStorage.userInfo).id,
            ids: selList.map((item) => item.id).join(","),
          };
          console.log(data);
          delTopicList(data).then((res) => {
            if (res.code == 1) {
              this.$Message.success("删除成功");
              this.getTopic();
              this.showBox = false;
              this.delLength = 0;
            }
          });
          // let params = {
          //   dataIds: selList.map((item) => item.id),
          //   typeId: "1002001",
          // };
          // myCollection.cancelCollect(params).then(({ code, result }) => {
          //   if (code === 200 && result) {
          //     this.$Message.success("删除成功");
          //     this.$emit("userInfo");
          //     this.getList();
          //     this.showBox = false;
          //     this.delLength = 0;
          //   }
          // });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topic {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.card {
  display: flex;
  flex-wrap: wrap;
  .card-item {
    background-color: #eee;
    border-radius: 4px;
    width: 24%;
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
    position: relative;
    .checkbox {
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .topic-item {
      margin-top: 15px;
      .topic-imgs {
        width: 100%;
        height: 140px;
        .topic-imgs-item {
          border-radius: 4px;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .info {
        .title {
          margin: 10px 0;
          cursor: pointer;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          .bottom-left {
            display: flex;
            align-items: center;
            cursor: pointer;
            .face {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
          .container-but {
            display: flex;
            align-items: center;

            .ribbon {
              margin-left: 10px;
              text-align: center;
              display: flex;
              align-items: center;
              cursor: pointer;
            }

            .npk {
              border-right: none;
            }
          }
        }
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>